<template>
  <el-container>
    <el-header height="40px" style="background-color: #00838f;">
      <h3 style="color: #fff;line-height: 40px;font-family: 'Microsoft YaHei',serif">商品条目管理</h3>
    </el-header>
    <el-main style="background-color: #fff;">
      <el-container>
        <el-header height="124px">
          <!--搜索下拉框-->
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <!--查询-->
            <el-form-item label="名称">
              <el-input v-model="selectFrom.name" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="一级分类" >
              <el-select  v-model="selectFrom.main_Value"
                          placeholder="一级分类"
                          clearable
                          @change="chooseMain($event)">
                <el-option
                  v-for="iltm in main_type"
                  :label="iltm.main_type_name"
                  :value="iltm.main_type_code"
                  :key="iltm.main_type_code">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类">
              <el-select v-model="selectFrom.sub_type"
                placeholder="二级分类"
                clearable
                @change="chooseSub($event)"
              >
                <el-option
                  v-for="iltm in subCode"
                  :label="iltm.sub_type_name"
                  :value="iltm.sub_type_id"
                  :key="iltm.sub_type_id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="状态">
              <template>
                <el-select
                  v-model="selectFrom.state"
                  filterable placeholder="请选择"
                  clearable
                >
                  <el-option
                    label="停用"
                    value="停用">
                  </el-option>
                  <el-option
                    label="启用"
                    value="启用">
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="selectSKU">查询</el-button>
            </el-form-item>
            <!--查询-->

            <!--增加SPU-->
            <el-button type="primary" icon="el-icon-plus"  @click="AddSku" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">添加商品</el-button>
            <el-dialog title="新增商品条目" :visible.sync="dialogSKUFormVisible" >
              <el-form :model="form" size="mini">
                <el-form-item label="商品名称" :label-width="formLabelWidth" >
                  <el-input v-model="formAddSPU.SPU_name" autocomplete="off" style="width: 500px"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" :label-width="formLabelWidth" >
                  <el-input v-model="formAddSPU.SPU_describe" autocomplete="off" style="width: 500px"></el-input>
                </el-form-item>

                <el-form-item label="设计师" :label-width="formLabelWidth">
                  <el-select  v-model="formAddSPU.designer_name" placeholder="请选择设计师">
                    <el-option v-for="iltm in designer" :label="iltm.designer_name" :value="iltm.designer_id"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="一级分类" :label-width="formLabelWidth" >
                  <el-select  v-model="main_Value"
                              placeholder="一级分类"
                              clearable
                              @change="chooseMain($event)">
                    <el-option
                      v-for="iltm in main_type"
                      :label="iltm.main_type_name"
                      :value="iltm.main_type_code"
                      :key="iltm.main_type_code">
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                  <el-select
                    v-model="formAddSPU.sub_type"
                    placeholder="二级分类"
                    clearable
                    @change="chooseSub($event)"
                  >
                    <el-option
                      v-for="iltm in subCode"
                      :label="iltm.sub_type_name"
                      :value="iltm.sub_type_id"
                      :key="iltm.sub_type_id"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品图片" :label-width="formLabelWidth"  >
<!--                  <el-input v-model="formAddSPU.SPU_pic_path" autocomplete="off" style="width: 500px"></el-input>-->
                  <el-upload class="upload-demo" action="" :before-upload="beforeAvatarUpload" :auto-upload=false :on-change="onchange" :on-remove="handleRemove" :file-list="fileList" list-type="picture" style="width:300px">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                  </el-upload>
                </el-form-item>
                <el-form-item label="商品状态" :label-width="formLabelWidth">
                  <el-switch
                    v-model="formAddSPU.SPU_state"
                    active-value="启用"
                    inactive-value="停用"
                    active-text="启用"
                    inactive-text="停用"
                  >
                  </el-switch>
                </el-form-item>



              </el-form>

              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSKUFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="onSubmit">确 定</el-button>
              </div>
            </el-dialog>
            <!--增加SKU-->

          </el-form>
          <!--/搜索下拉框-->



        </el-header>
        <el-main>
          <el-table
            ref="multipleTable"
            :data="list.slice((currentPage-1)*pageSize,currentPage*pageSize)"


            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              align="center"
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              align="center"
              label="商品编号">
              <template slot-scope="scope">
                <span>{{ scope.row.SPU_code }}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品名称">
              <template slot-scope="scope">
                <span>{{scope.row.SPU_name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="一级分类">
              <template slot-scope="scope">
                <span>{{scope.row.main_type_name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="二级分类">
              <template slot-scope="scope">
                <span>{{scope.row.sub_type_name}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品描述">
              <template slot-scope="scope">
                <span>{{scope.row.SPU_describe}}</span>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="商品图片">
              <template slot-scope="scope">
                <img :src="'http://localhost:8989'+scope.row.SPU_head_img_path" :alt="scope.row.SKU_name">
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="状态">
              <template slot-scope="scope">
                <el-tag :type="toggleButtonChange(scope.row.SPU_state).StateColor">
                  {{scope.row.SPU_state}}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              min-width="200px"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleCheck(scope.$index, scope.row)">查看</el-button>
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  v-if="$store.state.userInfo.employeeLv!=='门店管理员'">编辑</el-button>
                <el-button
                  size="mini"
                  :type="toggleButtonChange(scope.row.SPU_state).color"
                  @click="singleSubTypeToggle(scope.$index, scope.row)"
                  v-if="$store.state.userInfo.employeeLv!=='门店管理员'">{{toggleButtonChange(scope.row.SPU_state).string}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        <el-footer>
          <div class="myLeft">
            <el-button type="danger" @click="handleDisable" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">全部停用</el-button>
            <el-button type="success" @click="handleEnable" v-if="this.$store.state.userInfo.employeeLv!=='门店管理员'">全部启用</el-button>
            <!--<el-button type="info" disabled>导出 Excel</el-button>-->
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="list.length"
            class="myRight">
          </el-pagination>
        </el-footer>
      </el-container>
      <el-dialog title="商品表" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="name" label="类目名" width="150" align="center"></el-table-column>
          <el-table-column property="date" label="数据" width="750" align="center"></el-table-column>
        </el-table>
      </el-dialog>
      <el-dialog title="编辑商品" :visible.sync="dialogFormVisible">
        <el-form :model="form" size="mini">
          <el-form-item label="商品编码" :label-width="formLabelWidth" >
            <el-input v-model="form.SPU_code" autocomplete="off" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="商品名称" :label-width="formLabelWidth" >
            <el-input v-model="form.SPU_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品描述" :label-width="formLabelWidth" >
            <el-input v-model="form.SPU_describe" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="设计师" :label-width="formLabelWidth">
            <el-select  v-model="form.designer_name" placeholder="商品款式">
              <el-option v-for="iltm in designer" :label="iltm.designer_name" :value="iltm.designer_id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="一级分类" :label-width="formLabelWidth" >
            <el-select  v-model="main_Value"
                        placeholder="一级分类"
                        clearable
                        @change="chooseMain($event)"
            >
              <el-option
                v-for="iltm in main_type"
                :label="iltm.main_type_name"
                :value="iltm.main_type_code"
                :key="iltm.main_type_code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="二级分类" :label-width="formLabelWidth">
            <el-select
              v-model="form.sub_type"
              placeholder="二级分类"
              clearable
              @change="chooseSub($event)"
            >
              <el-option
                v-for="iltm in subCode"
                :label="iltm.sub_type_name"
                :value="iltm.sub_type_id"
                :key="iltm.sub_type_id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品图片路径" :label-width="formLabelWidth" >
<!--            <el-input v-model="form.SPU_pic_path" autocomplete="off"></el-input>-->
            <el-upload class="upload-demo" action="" :before-upload="beforeAvatarUpload" :auto-upload=false :on-change="onchange" :on-remove="handleRemove" :file-list="fileList" list-type="picture" style="width:300px">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>

          </el-form-item>


        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmit2">确 定</el-button>
        </div>
      </el-dialog>

    </el-main>
    <!--    <subTypeCheckDialog></subTypeCheckDialog>-->
  </el-container>
</template>

<script>
  // import subTypeCheckDialog from '../../components/typeManage/subTypeCheckDialog'
  export default {
    name: 'subType',
    components: {
      // subTypeCheckDialog
    },
    // 表格数据的操作方法
    data () {
      return {
        /*搜索的from表单*/
        selectFrom:{
          name:'',
          main_Value:'',
          sub_type:'',
          state:'',
        },
        /*/搜索的from表单*/
        /*增加的模态框状态*/
        dialogSKUFormVisible : false,
        /*/增加的模态框状态*/
        /*增加模态框的from表单*/
        AddSKUlist:[],
        AddSKUstyle:[],
        AddSKUcolor:[],
        formAddSPU:{
          designer_name:'',
          sub_type:'',
          SPU_name: '',
          SPU_describe:'',
          SPU_pic_path:'',
          SPU_state:''
        },
        /*增加时间数据*/
        formLabelWidth: '140px',//调整距离
        /*上传图片*/
        fileList: [],
        /*/上传图片*/
        /*/增加模态框的from表单*/

        /*查看的模态框状态*/
        dialogTableVisible: false,
        /*/查看的模态框状态*/
        /*修改的模态框状态*/
        dialogFormVisible:false,
        /*修改的模态框状态*/
        currentPage: 1,
        currentSpuPage: 1,
        pageSize: 10,
        list: [],
        click_list:{},
        chosenList: [],
        /*编辑的模态框属性*/
        form: {
          SPU_code:'',
          designer_name:'',
          sub_type:'',
          SPU_name: '',
          SPU_describe:'',
          SPU_pic_path:'',

        },
        main_Value:'',//一级分类值，SPU表没有
        main_type:[],//一级分类
        sub_type:[],//二级分类
        subCode:[],//二级菜单
        designer:[],//设计师
        /*/编辑的模态框属性*/

        //表头下拉框
        formInline: {
          user: '',
          region: ''
        },
        /*模态框表格数据*/
        gridData: [
        ],
        /*/模态框表格数据*/
      }
    },

    methods: {
      /*选择二级分类方法*/
      chooseMain(prov){
        console.log(prov);
        let roles = [];
        this.subCode=[];
        for (var val of this.sub_type) {
          if (prov===val.main_type_code) {
            console.log(val);
            roles.push({sub_type_name: val.sub_type_name,sub_type_id: val.sub_type_id})
          }
          this.subCode = roles
        }
        console.log(this.sub_type);
        console.log(this.subCode);
      },
      chooseSub(opt){
        console.log(opt);
      },
      /*/选择二级分类方法*/
      /*搜索SKU*/
      selectSKU(){
        console.log(this.selectFrom);
        this.$axiosx.post(`/api/backSelectSPU`,{
          from:this.selectFrom
        })
          .then((response)=>{
            console.log(response.data);
            this.list=response.data;
            for(let i=0;i<this.list.length;i++){
              this.list[i].SPU_head_img_path=this.list[i].SPU_head_img_path.substr(1);
            }

          })
          .catch((err)=>{
            console.log(err);
          })
      },
      /*/搜索SKU*/

      /*增加SPU的方法*/
      AddSku(){
        this.dialogSKUFormVisible = true;
      },
      AddSkuRight(){
        this.dialogSKUFormVisible = false;
        console.log(this.formAddSPU);
        let arr=[];
        for(let val in this.formAddSPU){
          console.log(this.formAddSPU[val]);
          arr.push(this.formAddSPU[val]);
        }
        console.log(arr);
        this.$axiosx.post('/api/backAddSPURingt',{
          arr: arr
        })
          .then((response)=>{
            if (response.data === '数据添加成功') {
              this.$message({
                type: response.data,
                message: '操作成功'
            });
              this.refreshData()
            }
          })
          .catch((error)=>{
            console.log(error.message);
          })
      },
      //添加图片
      onchange (file, filesList) {
        // console.log(file);
        //创建临时的路径来展示图片
        let windowURL = window.URL || window.webkitURL;
        this.src = windowURL.createObjectURL(file.raw);
        this.param = new FormData();//重新写一个表单上传的方法
        this.param.append('file', file.raw, file.name);
      },
      handleRemove (file, filesList) {
        this.param.delete('file')
      },
      onSubmit () {                   //表单提交的事件
        let mainimg = this.form.mainimg;//数据
        // console.log();
        this.param.append('message', mainimg);//req.body.message
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        this.$axiosx.post("/api/upSPUloadimg.do", this.param, config)
          .then(resp=> {
            console.log(resp.data);
            this.formAddSPU.SPU_pic_path=`./images/view_pic/spu/headImg/${resp.data.filename}`;
            this.AddSkuRight();
          }).catch(err => {
          console.log(err.message);
        })
      },

      beforeAvatarUpload () {
        return false;
      },
      //添加图片
      /*/增加SPU的方法*/

      handleChange(value) {
        console.log(value);
      },

      /*模态框方法*/
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      /*模态框方法*/
      // 分页控制开始
      handleSizeChange (val) {
        this.pageSize = val
      },
      handleCurrentChange (val) {
        this.currentPage = val
      },
      handleSpuCurrentChange(val) {
        this.currentSpuPage = val
      },
      // 分页控制结束


      //  多选行
      handleSelectionChange (val) {
        this.chosenList = [];
        val.forEach((val, index, arr) => {
          this.chosenList.push(val.SPU_code)
        })
      },
      //  编辑
      handleEdit (index, row) {
        this.click_list=row;
        this.dialogFormVisible = true;
        this.form.SPU_code = this.click_list.SPU_code;
        this.form.SPU_name = this.click_list.SPU_name;
        this.form.designer_name=this.click_list.designer_name;
        this.form.sub_type=this.click_list.sub_type_name;
        this.main_Value=this.click_list.main_type_name;
        this.form.SPU_describe=this.click_list.SPU_describe;
        this.form.SPU_pic_path=this.click_list.SPU_head_img_path;
        console.log(this.main_type);
        console.log(this.sub_type)
        // this.$axiosx.get('/api/backSPUEdit',{
        //   params:{
        //     SPU_Code:this.click_list.SPU_code
        //   }
        // })
        //   .then((response)=>{
        //     console.log(response.data);
        //     this.GoodsColor=response.data.color;
        //     this.GoodsStyle=response.data.style;
        //   })
        //   .catch((error)=>{
        //
        //   });
      },
      /*编辑确认*/
      onSubmit2 () {                   //表单提交的事件
        let mainimg = this.form.mainimg;//数据
        // console.log();
        this.param.append('message', mainimg);//req.body.message
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        this.$axiosx.post("/api/upSPUloadimg.do", this.param, config)
          .then(resp=> {
            console.log(resp.data);
            this.form.SPU_pic_path=`./images/view_pic/spu/headImg/${resp.data.filename}`;
            console.log(this.form.SPU_pic_path);
            this.GoodsModifierOn();
          }).catch(err => {
          console.log(err.message);
        })
      },
      GoodsModifierOn(){
        this.dialogFormVisible = false;
        console.log(this.form);
        let arr=[];
        for (let name in this.form) {
          arr.push(this.form[name]);
        }
        let code=arr.splice(0,1);
        // let attr=arr.splice(4,4);
        console.log(code);
        console.log(arr);
        this.$axiosx.post('/api/backSPUEditRight',{
          code:code,
          arr:arr,
          })
          .then((response)=>{
            console.log(response.data);
            this.refreshData();
          })
          .catch((error)=>{
            console.log(error.message);
          })

      },
      //  删除单个s
      singleSubTypeToggle (index, row) {
        console.log(row);
        if (row.SPU_state === '启用') {
          this.subTypeStateToggle([row.SPU_code], '停用')
        } else {
          this.subTypeStateToggle([row.SPU_code], '启用')
        }
      },
      //查看
      handleCheck (index, row) {
        this.dialogTableVisible = true;
        console.log(row);
        this.gridData=[
          {name:"商品编号", date:row.SPU_code},
          {name:"商品名称", date:row.SPU_name},
          {name:"商品描述", date:row.SPU_describe},
          {name:"设计师", date:row.designer_name},
          {name:"商品一级类别", date:row.main_type_name},
          {name:"商品二级类别", date:row.sub_type_name},
        ];

        //   console.log(index);
        //   console.log(this.gridData)
      },
      handleDisable () {
        this.subTypeStateToggle(this.chosenList, '停用')
      },
      handleEnable () {
        this.subTypeStateToggle(this.chosenList, '启用')
      },
      subTypeStateToggle (arr, method) {
        console.log(arr);
        console.log(method);
        this.$axiosx.post('/api/backSPUTypeToggle', {
          arr: arr,
          method: method
        })
          .then((response) => {
            console.log(response.data);
            if (response.data === '数据修改成功') {
              this.$message({
                type: 'success',
                message: '操作成功'
              });
              this.refreshData()
            }
          })
          .catch((error) => {
            console.log(error.message)
          })
      },
      toggleButtonChange (param) {
        if (param === '启用') {
          return {
            string: '停用',
            color: 'danger',
            StateColor: 'success'
          }
        } else {
          return {
            string: '启用',
            color: 'success',
            StateColor: 'danger'
          }
        }
      },
      refreshData () {
        this.$axiosx.get('/api/backSPUManage')
          .then((response) => {
            this.list = response.data.list;
            console.log(response.data);
            this.designer = response.data.designer;
            this.main_type = response.data.main_type;
            this.sub_type = response.data.sub_type;
            for(let i=0;i<this.list.length;i++){
              this.list[i].SPU_head_img_path=this.list[i].SPU_head_img_path.substr(1);
            }
          })
          .catch((error) => {
            console.log(error.message)
          })
      }
    },
    created () {
      this.refreshData()
    }
  }
</script>

<style scoped lang="less">
  img{
    width: 100px;
  }
</style>
